<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">设备分组</div>
    <div class="page-main">

        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'z'" :energy="'Total'" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">


                <el-transfer
                        filterable
                        v-model="value"
                        :titles="['已选设备', '未选设备']"
                        :data="data"
                        :props="defaultProps"
                        @change="handleChange"
                         style="margin-top: 20px;height: 80%">
                </el-transfer>
                </div>

            </el-col>
        </el-row>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
           value:[],
           data:[],
            defaultProps: {
                label:'DeviceName',
                key:'DeviceID',
            },

            zoneId:'',
            zoneType:'',
        },
        methods:{

            onTreeNode(data){
                this.zoneId = '';
                this.zoneType='';
                let ids =data.id.split('_');

                if (ids[0]=='Z'){
                    this.zoneId = data.dataId;
                    this.zoneType = 0;
                }else {
                    return;
                }
                this.getDeviceList();
            },
            handleChange(value, direction, movedKeys) {
                if (direction =='left'){
                    HttpUtil.get('Device/bind',{zoneId:this.zoneId,zoneType:this.zoneType,deviceIds:movedKeys.join(',')}).success((res)=>{
                        this.getDeviceList();
                    })
                }else {
                    HttpUtil.get('Device/UnBind',{zoneType:this.zoneType,deviceIds:movedKeys.join(',')}).success((res)=>{
                        this.getDeviceList();
                    })
                }
            },
            saveBtn(){
                if (this.dataId !=''){
                    let param={
                        zoneId:this.dataId
                    }

                }

            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.$message({
                            type:'success',
                            message:'保存成功'
                        })
                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            getDeviceList(){
                  HttpUtil.get('Device/getDeviceBindStatus',{zoneId:this.zoneId,zoneType:this.zoneType}).success((res)=>{
                              this.data=[];
                              this.value=[];
                      this.data = res.data.boundList.concat(res.data.unBoundList);
                              for (let item of res.data.unBoundList){
                                    this.value.push(item.DeviceID);
                              }
                  });
            }
        },
        created:function(){

        },
        mounted:function(){
        }
    });


</script>

</body>
</html>
